<template>
  <div class="title-box">
    <span>
      沈阳浩宇数字办公系统
    </span>
    <div class="user-info">
      <div class="">
        <span>您好！ </span>
        <span class="left" @click="toUser">{{userInfo.userName}}</span>
      </div>
      <div
        class="msg"
        @click="toMSG"
      >
        <el-button
            link
            :icon="Message"
            class="btn"
        >
          消 息
        </el-button>
        <span
          class="dot"
          v-if="isPointShow"
        >
          &nbsp;
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from "vue"
import {useRouter} from "vue-router";
import emitter from "@/lib/eventBus";
import {ElButton} from "element-plus"
import {Message} from "@element-plus/icons-vue"
import {getMSGList} from "@/api/index.js"
import {hasUnreadMessage} from "@/lib/utils.js"


const router = useRouter()
const userInfo = reactive({
  userName:'',
  userId:''
})

const isPointShow = ref(false)

const toUser = ()=>{
  router.push('user')
}

onMounted(()=>{
  getUerInfo()
  getNotice()
})

const getUerInfo = () => {
  const obj = JSON.parse(localStorage.getItem('syhyDocManSys'))
  userInfo.userId = obj.id
  userInfo.userName = obj.username
}

const getNotice = async (id) => {
  try {
    isPointShow.value = await hasUnreadMessage(id)
  } catch (e) {
    console.log(e)
  }
}

const toMSG = () => {
  router.push('msg')
}

emitter.on('point',(()=>{
  getNotice(userInfo.userId)
}))


watch(() =>router.currentRoute.value.path,async (newValue, oldValue) => {
  try {
    isPointShow.value = await hasUnreadMessage(userInfo.userId)
  } catch (e) {
    console.log(e)
  }
},{ immediate: true })

</script>

<style scoped lang="less">
.title-box{
  display: none;
  position: sticky;
  left: 0;
  top: 0;
  color: white;
  background-image: linear-gradient(to bottom, #003366 0%, #7AC5CD 100%);
  height: 8%;
  width: 100%;
  font-size: 3vh;
  letter-spacing: 3px;
  line-height: 8vh;
  //display: flex;
  justify-content: space-between;
  padding-left: 4vw;
  .user-info{
    margin-right: 6vw;
    font-size: 1.8vh;
    display: flex;
    .left{
      cursor: pointer;
      &:hover{
        text-decoration: underline;
      }
    }
  }
  .msg{
    margin-left: 1vw;
    .btn{
      font-size: 1.8vh;
      color: white;
      &:hover{
        text-decoration: underline;
        color: lightgreen;
      }
    }
  }
  .dot{
    vertical-align:text-top;
    display:inline-block;
    background-color:red;
    border-radius:50%;
    width:8px;
    height:8px;
  }
}
</style>